import React, { FC, useEffect, useState } from 'react'
import { Card, Empty } from 'antd'
import { getarticeList } from '@/api/article'
import { useTranslation } from 'react-i18next'
import { useNavigate } from 'react-router-dom'
import { DetailsItem } from '@/utils/index'
import style from './index.module.scss'

const Index: FC = () => {
  // const [articlelist1, setArticleList1] = useState([])
  const [articlelist2, setArticleList2] = useState([])
  const navigate = useNavigate()
  const { t } = useTranslation()
  useEffect(() => {
    getarticeList()
      .then((res) => {
        // setArticleList1(res.data.data['2022'].December)
        setArticleList2(res.data.data['2022'].November)
        console.log(res.data.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  return (
    <div className={style.articelist}>
      <Card className={style.card}>
        <div className={style.headertext}>
          <p>
            <span className={style.sp1}>{t('guitag')}</span>
          </p>
          <p>
            {t('guisum')}
            {t('guipian')}
          </p>
        </div>
        <h2 style={{ fontSize: '25px' }}>2022</h2>

        {/* <div style={{ fontSize: '20px', textIndent: '15px' }}>December</div> */}
        <ul className={style.ul}>
          {/* {articlelist1.length > 0
            ? (
                articlelist1.map((item: DetailsItem) => {
                  return (
                <li
                  key={item.id}
                  onClick={() =>
                    navigate('/details/' + item.id, { state: item })
                  }
                >
                  <span>11 - 18</span>
                  {item.title}
                </li>
                  )
                })
              )
            : (
            <Empty />
              )} */}
        </ul>

        <div style={{ fontSize: '20px', textIndent: '15px' }}>November</div>
        <ul className={style.ul}>
          {articlelist2.length > 0
            ? (
                articlelist2.map((item: DetailsItem) => {
                  return (
                <li
                  key={item.id}
                  onClick={() =>
                    navigate('/details/' + item.id, { state: item })
                  }
                >
                  <span>11 - 18</span>
                  {item.title}
                </li>
                  )
                })
              )
            : (
            <Empty />
              )}
        </ul>
      </Card>
    </div>
  )
}

export default Index
